@page
@model LoginModel

@{
    Layout = "_LoginLayout";
    ViewData["Title"] = "登录";

    var pClass = Model.Input.DynamicVerify ? "d-none" : "";
    var vClass = Model.Input.DynamicVerify ? "" : "d-none"; 

    var wsPath =  Request.PathBase + "/ws";
    var unformattedKey = Guid.NewGuid().ToString();
}

<div class="row">
    <div class="d-none d-lg-block d-xl-block col-lg-8">
        <div id="demo" class="carousel slide center-vertical mx-auto" data-ride="carousel">

            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="~/images/local_login.png" />
                    <div class="carousel-caption">
                        <h3>城信统一认证中心</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/images/onemap_login.png" />
                    <div class="carousel-caption">
                        <h3>一张图实施监督系统</h3>
                    </div>
                </div>

            </div>

            <!-- 左右切换按钮
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>-->

        </div>
    </div>
    <div class="col-xd-12 offset-md-2 col-md-8 offset-lg-0 col-lg-4">
        <div id="login" class="border border-light rounded bg-white">
            <h4 class="text-center">本地账号登录</h4>
            <ul class="nav login-tabs justify-content-end ">
                <li class="login-item">

                    <a class="login-link active" data-title="二维码" data-toggle="tab" href="#userpassword">
                        <i data-toggle="tooltip" data-placement="left" title="密码登录" class="fa icon-pc" ></i>
                    </a>
                </li>
                <li class="login-item ">
                    <a class="login-link " data-title="用户名密码登录" data-toggle="tab" href="#qrcode">
                        <i data-toggle="tooltip" data-placement="left" title="扫码登录" class="fa icon-qrcode"></i>
                    </a>
                </li>
            </ul>
            <div class="triangle-bottomleft"></div>
            <div class="tab-content" style="min-height: 250px">
                <div id="userpassword" class="tab-pane container active">
                    <section>
                    @if (Model.Input.EnableLocalLogin)
                    {
                        <form id="account" method="post">                                   
                            <div asp-validation-summary="All" class="text-danger"></div>
           
                            <div class="form-group input-group">

                                <div class="input-group-prepend">
                                    <label class="input-group-text" asp-for="Input.Email"><i class="icon-user"></i></label>

                                </div>
                                <input asp-for="Input.Email" class="form-control" />
                                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                            </div>

                            <div id="passwordDiv" class="@pClass form-group input-group">

                                    <div class="input-group-prepend">
                                        <label class="input-group-text" aspfor="Input.Password"><i
                                                class="icon-pwd"></i></label>
                                    </div>

                                    <input asp-for="Input.Password" class="form-control" />
                                    <div class="input-group-append">
                                        <span id="passwordeye" class="input-group-text bg-transparent icon-eyeclos"></span>
                                    </div>
                                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                            </div>

                            <div id="verifyCodeDiv" class="@vClass form-group input-group">
                                <div class="input-group-prepend">
                                    <label class="input-group-text sr-only" for="VerifyCode">VerifyCode</label>
                                </div>
                                <input name="VerifyCode" class="form-control" id="VerifyCode" placeholder="输入验证码"  data-val="true" />
                                <div class="input-group-append">
                                     <a type="button" id="sendSMS" class="btn border" role="button">发送验证码</a>
                                </div>

                            </div>

                            <div class="form-group">
                                <div class="checkbox  form-check-inline">
                                    <label asp-for="Input.RememberMe">
                                        <input asp-for="Input.RememberMe" />
                                        @Html.DisplayNameFor(m => m.Input.RememberMe)
                                    </label>
                                </div>
                                <div class="checkbox form-check-inline float-right">
                                    <label asp-for="Input.DynamicVerify">
                                        <input asp-for="Input.DynamicVerify" />
                                        动态密码
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block" name="button"
                                        value="login">登录</button>
                            </div>

                        
 
                            <div class="form-group">
                                        <span>
                                            <a id="forgot-password" asp-page="./ForgotPassword">忘记密码?</a>
                                        </span>

                                <span class="float-right">
                                    <button type="submit" class="btn-link border-0 bg-transparent"
                                            asp-page-handler="SendVerificationEmail" >重发邮箱验证信息</button>
                                </span>
                            </div>
                        </form>
                    }
                    </section>
                </div>
                <div id="qrcode" class="tab-pane container">
                    <section>
                        <form method="post">
                          
                            <div class="form-group input-group"><input type="hidden" class="form-control" /></div>
                        </form>
                        <p class="text-center">用App扫描以下二维码</p>
           
                        <div class="text-center">
                            <img class="qrcoder" src='@Url.Action("AuthenicatorQrCoder","Home", new {id = unformattedKey })' />
                        </div>
                    </section>
                </div>
            </div>
            <section class="text-center">

                <div class="d-flex justify-content-center text-center">
                    <div class="d-inline-block align-self-center w-10 h-25 bg-warning"></div>
                    <span class="align-self-center">---- 或者 ----</span>
                    <div class="d-inline-block align-self-center w-10"></div>
                </div>
                <div>
                                       
                @{
                    if (!Model.Input.VisibleExternalProviders.Any())
                    {
                        
                            <p>
                                There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
                                for details on setting up this ASP.NET application to support logging in via external services.
                            </p>
                    
                    }
                    else
                    {
                        <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                        
                                <p>
                                    @foreach (var provider in Model.Input.VisibleExternalProviders)
                                    {
                                        <button type="submit" class="btn btn-primary" name="provider" value="@provider.AuthenticationScheme" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                                    }
                                </p>
                        
                        </form>
                    }
                }

                </div>


                <div>
                    <p>还没有账号？<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">注册新用户</a></p>
                </div>
            </section>
        </div>
    </div>
</div>
       


@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script type="text/javascript">
         $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();


            //显示/隐藏密码
            $('#passwordeye').off('click').on('click',function(){
                if ($(this).hasClass('icon-eyeclos')){
                    $(this).removeClass('icon-eyeclos').addClass('icon-eyeopen');//密码可见
                    $('#Input_Password').prop('type','text');
                }else{
                    $(this).removeClass('icon-eyeopen').addClass('icon-eyeclos');//密码不可见
                    $('#Input_Password').prop('type','password');
                };
            });

            // 显示/隐藏动态登录
            $("#Input_DynamicVerify").change(function(){
                var isDynamic = $("#Input_DynamicVerify").is(':checked');
                if (isDynamic)
                {
                    $("#verifyCodeDiv").removeClass("d-none");
                    $("#passwordDiv").addClass("d-none");
                }
                else
                {
                     $("#verifyCodeDiv").addClass("d-none");
                    $("#passwordDiv").removeClass("d-none");
                    $("#Input_Password").val("");
                }
            });

             $("#VerifyCode").change(function(){
                $("#Input_Password").val($(this).val());
            });

            //发送短信
            var util = {
                wait: 60,
                hsTime: function (that) {
                    _this = this;
                    if (_this.wait == 0) {
                        $(that).removeAttr("disabled").text('重发短信验证码');
                        _this.wait = 60;
                       
                    } else {
                        var _this = this;
                        $(that).attr("disabled", true).text('在' + _this.wait + '秒后点此重发');
                        _this.wait--;
                        setTimeout(function () {
                            _this.hsTime(that);
                        }, 1000)
                    }
                }
            }
            
            $("#sendSMS").click(function(){
               
                var phone=$('#Input_Email').val();
                //var pre=/^[1][358][0-9]{9}$/;
                if(phone=='') {
                    //alert("手机号不能为空");
                     BootstrapDialog.show({
                        type : BootstrapDialog.TYPE_DANGER,
                        title : '错误 ',
                        message : "手机号不能为空",
                        size : BootstrapDialog.SIZE_SMALL,//size为小，默认的对话框比较宽
                        buttons : [ {// 设置关闭按钮
                            label : '关闭',
                            action : function(dialogItself) {
                                dialogItself.close();
                            }
                        } ]
                     });
                    return this;
                }
              

                $.ajax({
                    url: "@Url.Action("SendVerifyCode", "Home")",//服务器发送短信
                    type: 'GET',
                    dataType: 'json',
                    data: {phoneNumber: phone},
                    success:function(result) {
                        if (result.code > 0) {
                            //alert(result.message);
                            BootstrapDialog.show({
                                type : BootstrapDialog.TYPE_DANGER,
                                title : '错误 ',
                                message : result.message,
                                size : BootstrapDialog.SIZE_SMALL,//size为小，默认的对话框比较宽
                                buttons : [ {// 设置关闭按钮
                                    label : '关闭',
                                    action : function(dialogItself) {
                                        dialogItself.close();
                                    }
                                } ]
                            });
                            return this;
                        }
                        util.hsTime("#sendSMS");
                    },
                    error: function(xhr) {
                        
                    }
                });

                
            });


            //webscocket
            var protocol = location.protocol === "https:" ? "wss:" : "ws:";
            var wsUri = protocol + "//" + window.location.host + "@wsPath";
            var socket = new WebSocket(wsUri);
            socket.onopen = e => {
                console.log("socket opened", e);
               
            };
    
            socket.onclose = function (e) {
                console.log("socket closed", e);
            };
    
            socket.onmessage = function (e) {
                console.log(e);
                $('#msgs').append(e.data + '<br />');
                var msg = JSON.parse(e.data);
                switch (msg.type)
                {
                    case "connected":
                        var backMsg = {  message: "@unformattedKey", sender : msg.receiver, type : "client" };
                        socket.send(JSON.stringify(backMsg)); 
                        break;
                    case "loginToken":
                        var token = msg.message;
                        $("#TempToken").val(token);
                        $("#tokenLoginForm").submit();
                        break;
                    default:
                        break;   
                }
                
            };
    
            socket.onerror = function (e) {
                console.error(e.data);
            };
      

        });
    </script>
}
